<template>
    <el-header >
      <h2>员工管理</h2>
    </el-header>
    <!-- 搜索 -->
    <div style="background-color: white;display: flex;">
          <div class="block">
            <div class="block">
            <span style="margin-right: 10px;">注册日期:</span>
            <el-input v-model="date_value" placeholder="2022-01-01" style="width: 200px;margin-right: 20px;"></el-input>
            </div>
          </div>
      <div style="margin-bottom: 20px;display: flex;">

        <el-select style="width: 200px;margin-right: 20px;" v-model="role_list.value" placeholder="请选择角色">
          <el-option label="请选择" value="" @click="getuser_role('')"></el-option>
          <el-option v-for="item in role_list" :label="item.name" :value="item.id" @click="getuser_role(item.id)" ></el-option>
        </el-select>
        <el-input v-model="user" placeholder="请输入姓名" style="width: 200px;height: 32px;font-size: 14px;" />
        <el-button type="primary" @click="searchuser">搜索</el-button>
        <el-button type="danger"  @click="del_user()">批量删除</el-button>
        <el-button type="primary" style="margin-left: 20px" @click="addstaff">新增</el-button>
      </div>
    </div>
    <!-- 添加用户 -->
    <!-- <div style="margin-bottom: 50px;margin-top: 20px;">
     
    </div> -->
    <!-- 列表 -->
    <el-table :data="user_list" border @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="staff_id" label="员工编号"  />
      <el-table-column  label="头像" #default="scope" >
        <img :src="scope.row.avatar" alt="" style="width: 50px;height: 50px;">
      </el-table-column>
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="role_id" label="角色"  />
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="phone" label="手机号"  />
      <el-table-column prop="update_person" label="更新人"  />
      <el-table-column prop="update_time" label="更新时间"  />
      <el-table-column label="操作"   >
        <template #default="scope">
          <el-button size="small" type="primary" @click="edituser(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteuser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination 
            :current-page="page_query.page"
            :page-size="page_query.page_size"
            :page-sizes="[2,3,4]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    <!-- <el-pagination background layout="prev, pager, next" :total="total" :page-size="page_query.page_size" @current-change="get_page" /> -->
  
    <!-- 修改表单 -->
    <el-dialog
      v-model="flag"
      title="修改员工信息"
      width="500"
    >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select  v-model="form.roleid" placeholder="请选择">
          <el-option label="请选择" value=""/>
          <el-option v-for="item in role_list " :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="更新人">
        <el-input v-model="form.update_person" />
      </el-form-item>
      <el-form-item label="头像">
        <input type="file" accept="image/png, image/jpeg" @change="imageChange" />
      </el-form-item>
    </el-form>
      <template #footer>
        <div>
          <el-button @click="flag = false">取消</el-button>
          <el-button type="primary" @click="putuser">确认</el-button>
        </div>
      </template>
    </el-dialog>



</template>

<script setup>
import http from "../../http";  
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();

let mul= ref([])
const one=(val)=>{
  mul.value.push(val)
  console.log(mul)
}
const selectable =(row)=>![18].includes(row.roleid)
const handleSelectionChange = (val) => {
  if (val){
    mul.value = val
  }
  else{
    mul.value = []
  }
  console.log(mul.value)
}
const del_user = () => {
  // 检查是否有选中的项
  if (!mul.value || mul.value.length === 0) {
    ElMessage.warning('请选择'); // 提示用户选择
    return; // 终止函数执行
   }
  for (let i = 0; i < mul.value.length; i++) {
    console.log(mul.value[i].id)
    http.delete(`/app/staff/${mul.value[i].id}`)
    .then(res => {
      getuserList()
    })
  }
  ElMessage.success('删除成功')
}



let date_value = ref('')
let user = ref('')
const searchuser = () => {
  console.log(date_value.value)
  http.get(`/app/staff/?name=${user.value}&update_time=${date_value.value}`)
  .then(res => {
    user_list.value = res.data.results;
    total.value = res.data.count
    user.value = ""
    date_value.value = ""
  })
}


const addstaff = () => {
  router.push({path: '/addstaff'})
}

const deleteuser = (row) => {
  http.delete(`/app/staff/${row.id}`)
  .then(res=>{
    // console.log(res)
    getuserList()
  })
}
let flag = ref(false)
let form = ref({
  name:'',
  roleid:'',
  username:'',
  phone:'',
  update_person:'',
  avatar:''

})
const edituser=(row)=>{
  flag.value=true
  form.value=row
}
const putuser=()=>{
  // console.log(form)
  // console.log(form.value.id)
  http.put(`/app/staff/${form.value.id}/putuser/`,form.value,{headers:{'Content-Type':'multipart/form-data'}})
  .then(res=>{
    // console.log(res)
    getuserList()
    flag.value=false
  })
}
let total = ref(0)
let page_query=ref({
  page:1,
  page_size:7
})
const handleCurrentChange=(num)=>{
  page_query.value.page=num
    getuserList()
}

const handleSizeChange=(size)=>{
  page_query.value.page_size=size
    getuserList()
}
// const get_page = (page) => {
//   page_query.value.page = page
//   getuserList()
// }
const getuser_role= (id) => {
  // console.log(id)
  http.get(`/app/staff/?roleid=${id}`)
  .then(res=>{
    // console.log(res)
    user_list.value = res.data.results;
    total.value = res.data.count
  })
}

let user_list = ref([]);
const getuserList = () => {
  http.get(`/app/staff/?page=${page_query.value.page}&page_size=${page_query.value.page_size}`)
  .then(res=>{
    // console.log(res)
    user_list.value = res.data.results;
    total.value = res.data.count
  })
}
const imageChange=(e)=>{
    // console.log(e)
    form.value.avatar= e.target.files[0];
}

let role_list =ref([]);
const getRoleList = () => {
  http.get(`/app/role/get_role`)
  .then(res=>{
    role_list.value = res.data.data;
  })
}



onMounted(() => {
  getRoleList()
  getuserList()
});

</script>

<style>
/* .block {
  padding: 20px 0;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
} */

</style>
